<template>
    <div class="myInfo">

        <div class="item">
            <span>姓名：</span>
            <Input placeholder="姓名" style="width: 300px" v-model="my_info.name" />
        </div>
        
        <div class="item">
            <span>地址：</span>
            <Input placeholder="地址" style="width: 300px" v-model="my_info.address" />
        </div>
        <div class="item">
            <span>被赞次数：</span>
            <Input placeholder="被赞次数" style="width: 300px" v-model="my_info.agivNum" disabled />
        </div>

        <div class="item">
            <span>QQ号：</span>
            <Input placeholder="QQ号" style="width: 300px" v-model="my_info.qq" />
        </div>

        <div class="item">
            <span>微信号：</span>
            <Input placeholder="微信号" style="width: 300px" v-model="my_info.weixin" />
        </div>

        <div class="item">
            <span>知乎号：</span>
            <Input placeholder="知乎号" style="width: 300px" v-model="my_info.zhihu" />
        </div>

        <div class="item">
            <span>照片：</span>
            <Button type="primary" @click="update_show('imgurl')">点击上传</Button>
            <p @mouseenter="enter" @mouseleave="leave"><Icon type="ios-images" size='30'/></p>
            <img class="myPhoto" :src="this.my_info.photo" v-show="photo_show">
        </div>


        <div class="item">
            <span>备案号：</span>
            <Input  style="width: 300px" v-model="my_info.recordNumber" />
        </div>

        <div class="item">
            <span>性格：</span>
            <Input placeholder="性格" style="width: 300px" v-model="my_info.nature" />
            <p>| 为了美观注意用，隔开</p>
        </div>

        <div class="item">
            <span>兴趣：</span>
            <Input placeholder="兴趣" style="width: 300px" v-model="my_info.interest" />
            <p>| 为了美观注意用，隔开</p>
        </div>
        <div class="item">
            <span>个人介绍:</span>
            <mavon-editor 
            @save = "saveDoc" 
            :value ="this.my_info.introduce_markdown"
             />
        </div>
        <Button type="success" long @click="btnSave" v-loading.fullscreen.lock="fullscreenLoading" >保存</Button>
            <PopupImg :isShow = this.popUpShow @getimgurl = "geturl" @changeshow = "changePopUpShow"></PopupImg>
            <!--01.isShow传值,默认为false-->
            <!--02.changeshow方法,子组件传回来的上传窗口的状态-->
            <!--03.getimgurl得到base64字符串的方法-->

            <Reload tourl = "/Admin/system"  v-if="this.saveShow"></Reload>
            <!--01.tourl必传，需要跳转的页面-->
            <!--02.saveShow必传，默认是否启用-->
    </div>
    
</template>

<script>
import {myInfo} from '@/network/system/myInfo'
import {updateMyInfo} from '@/network/system/myInfo'

import PopupImg from '@/components/common/Popup-imgUp/Popup-imgUp'
import Reload from '@/components/common/reload/reload'
export default {
    name:'myInfo',
    components:{
        PopupImg,
        Reload
    },
    data(){
        return{
            Mytoken:{
                token:this.$store.state.adminToken
            },
            my_info:'',
            //01是否默认开启02是否禁用滑轮
            fullscreenLoading:false,
            lock:true,
            photo_show:false,
            //传给上传组件的默认值popUpShow
            popUpShow:false,
            tempName:'',
            saveShow:false
        }
    },
    methods:{
        //个人照片预览
        enter(){
            //console.log('移入')
            this.photo_show = true
        },
        leave(){
            //console.log('移出')
            this.photo_show = false
        },

        //打开上传组件
        update_show(name){
            this.popUpShow = true
            this.tempName = name
        },

        //接受子组件的值
        changePopUpShow(value){
            this.popUpShow = value
        },

        //获得图片url
        geturl(value){
             switch(this.tempName){
                 case 'imgurl':
                     this.my_info.photo = value
                     break
             }
        },
        //富文本保存
        saveDoc(markdown,html){
            this.my_info.introduce_markdown = markdown
            this.my_info.introduce_html = html
        },

        //保存
        btnSave(){
            this.fullscreenLoading = true
            updateMyInfo(this.my_info).then( res => {
                //console.log(res)
                this.fullscreenLoading = false
                this.saveShow = true  
            }).catch( err => {
                console.log(err)
            })
            
        }
    },
    created(){
        myInfo(this.Mytoken).then( res => {
            this.my_info = res.data[0]
            //console.log(this.my_info)
        }).catch( err => {
            console.log(err)
        })
    },
    beforeDestory(){
        //销毁前
        this.photo_show = false
    }

}
</script>

<style scoped>
.item{
    margin: 10px 5px
}
span{
    display: inline-block;
    width: 100px;
    font-weight: bold;
}
p{
    display: inline-block;
    margin-left: 20px;
    font-size: 12px;
    font-weight: bold;
    color: #EF4F4A;
}
.myPhoto{
    position: fixed;
    top: 20%;
    left: 30%;
    width: 200px;
    height: 200px;
    z-index: 9;
}
</style>